<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/lunbo.css">
    <script type="text/javascript" src="js/animate.js"></script>
</head>
<body>
<div class="w-wrap" id="js_wrap">
    <div class="wrap-slide" id="wrap_slide">
        <ul>
            <li><a href="#"><img src="../img/1.png" alt=""></a></li>
            <li><a href="#"><img src="../img/2.png" alt=""></a></li>
            <li><a href="#"><img src="../img/3.png" alt=""></a></li>
            <li><a href="#"><img src="../img/4.png" alt=""></a></li>
            <li><a href="#"><img src="../img/5.png" alt=""></a></li>
            <!-- <li><a href="#"><img src="images/slidepic6.jpg" alt=""></a></li> -->
        </ul>
        <div class="wrap-slide-arrow" id="wrap_slide_arrow">
            <a href="javascript:;" class="prev"></a>
            <a href="javascript:;" class="next"></a>
        </div>
    </div>
</div>
<script>
    function $(id){ return document.getElementById(id);}
    var js_wrap = $("js_wrap");
    var wrap_slide = $("wrap_slide");
    var wrap_slide_arrow = $("wrap_slide_arrow");
    var lis = wrap_slide.children[0].children;


    var json = [
        {
            //1
            width: 400,
            top: 20,
            left: 50,
            opacity: 20,
            z: 2
        },
        {
            //2
            width: 600,
            top: 70,
            left: 0,
            opacity: 80,
            z: 3
        },
        {
            //3
            width: 800,
            top: 100,
            left: 200,
            opacity: 100,
            z: 4
        },
        {
            //4
            width: 600,
            top: 70,
            left: 600,
            opacity: 80,
            z: 3
        },
        {
            //5
            width: 400,
            top: 20,
            left: 750,
            opacity: 20,
            z: 2
        }/*,
      {
        //6
        width: 300,
        top: 10,
        left: 400,
        opacity: 10,
        z: 1
      }*/
    ]
    change(); //将各个图片按照json铺开层次
    var jieliu = true;
    //两个按钮点击事件
    var as = wrap_slide_arrow.children;
    for(var k in as){
        as[k].onclick = function(){
            if(this.className == "prev"){
                /*alert("左侧按钮");*/
                //所有图片逆时针旋转，相当于图片不动，json的第一个删除并插到最后一个
                if(jieliu == true){
                    change(false);
                    jieliu = false;
                }

            }else if(this.className == "next"){
                /*alert("右侧按钮");*/
                //所有图片顺时针旋转，相当于图片不动，json的最后一个删除并插到第一个
                if(jieliu == true){
                    change(true);
                    jieliu = false;
                }
            }
        }
    }
    function change(flag){
        if(flag){
            //所有图片顺时针旋转，相当于图片不动，json的最后一个删除并插到第一个
            json.unshift(json.pop());
        }else{
            //所有图片逆时针旋转，相当于图片不动，json的第一个删除并插到最后一个
            json.push(json.shift());
        }
        for(var k in json){
            animate(lis[k],{
                width: json[k].width,
                top: json[k].top,
                left: json[k].left,
                opacity: json[k].opacity,
                zIndex: json[k].z
            },function(){ jieliu = true;}); //当动画执行完，执行回调函数，此时置节流为true
        }
    }
    var timer = null;
    timer = setInterval(autoPlay,2000);
    function autoPlay(){
        if(jieliu == true){
            change(true);
            jieliu = false;
        }
    }

    js_wrap.onmouseover = function(){
        clearInterval(timer);
        animate(wrap_slide_arrow,{opacity:100});
    }
    js_wrap.onmouseout = function(){
        clearInterval(timer);
        timer = setInterval(autoPlay,2000);
        animate(wrap_slide_arrow,{opacity:0});
    }

    /*js_wrap.onmouseover = function(){
      animate(wrap_slide_arrow,{opacity:100});
    }
    js_wrap.onmouseout = function(){
      animate(wrap_slide_arrow,{opacity:0});
    }*/
</script>
</body>
</html>